import React from 'react';
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom';

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            selectTab: 'redTab',
            hidden: false,
            fullScreen: true,
        }
    }
    render() {
        return (
            <div 
            style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar unselectedTintColor='#949494' tintColor='#ff2d4a' barTintColor='white' hidden={this.state.hidden}>
                    <TabBar.Item title='首页' key='index' icon={<i className='iconfont icon-shouye'></i>} 
                    selectedIcon={<i className='iconfont icon-shouye' style={{ color: '#ff2d4a' }}
                    ></i>}
                        selected={this.props.location.pathname === '/'} onPress={() => {
                            this.props.history.push('/');
                        }
                        }>
                        {this.props.children}
                    </TabBar.Item>
                    <TabBar.Item title='分类' key='category' icon={<i className='iconfont icon-fenlei'></i>} selectedIcon={<i className='iconfont icon-fenlei' style={{ color: '#ff2d4a' }}
                    ></i>}
                        selected={this.props.location.pathname === '/category'} onPress={() => {
                            this.props.history.push('/category');
                        }
                        }>
                        {this.props.children}
                    </TabBar.Item>
                    <TabBar.Item title='购物车' key='cart' icon={<i className='iconfont icon-gouwuche'></i>} selectedIcon={<i className='iconfont icon-gouwuche' style={{ color: '#ff2d4a' }}
                    ></i>}
                        selected={this.props.location.pathname === '/cart'} onPress={() => {
                            this.props.history.push('/cart');
                        }
                        }>
                        {this.props.children}
                    </TabBar.Item>
                    <TabBar.Item title='我的' key='mime' icon={<i className='iconfont icon-wode'></i>} selectedIcon={<i className='iconfont icon-wode' style={{ color: '#ff2d4a' }}
                    ></i>}
                        selected={this.props.location.pathname === '/mime'} onPress={() => {
                            this.props.history.push('/mime');
                        }
                        }>
                        {this.props.children}
                    </TabBar.Item>
                </TabBar>

            </div>
        );
    }
}

export default withRouter(TabBarExample);
